<template>
  <div class="sys-dept">
    <Split v-model="splitValue" :max="0.5" :min="0.2" class="split-area">
      <div slot="left" class="left-split-pane">
        <div class="left-content">
          <v-title title="组织架构">
            <Button type="primary" @click="addDept">新增</Button>
          </v-title>
          <Tree :data="treeData" class="dept-tree" @on-select-change="currentClick"></Tree>
        </div>
      </div>
      <div slot="right" class="right-split-pane">
        <div class="right-content">
          <v-title title="公司/部门详情">
            <Button type="primary" @click="saveDept">保存</Button>
            <Button type="primary" @click="deleteDept">删除</Button>
          </v-title>
          <div class="dept-detail">
            <Form ref="formInline" :label-width="110" :model="deptInfo" :rules="deptInfoRule">
              <FormItem label="公司/部门名称">
                <Input v-model="deptInfo.name" ref="deptName" placeholder="公司/部门名称"></Input>
              </FormItem>
              <FormItem label="上级公司/部门">
                <Input v-model="deptInfo.superiorName" clearable readonly placeholder="上级公司/部门，不填则为初始组织" @on-clear="deptInfo.superior=''">
                  <span slot="append" class="add-pointer"><Icon type="md-add" @click="choiseSuperior"/></span>
                </Input>
              </FormItem>
              <FormItem label="排序">
                <InputNumber v-model="deptInfo.sortNum" placeholder="排序"></InputNumber>
              </FormItem>
              <FormItem label="公司/部门简介">
                <Input type="textarea" :rows="4" v-model="deptInfo.introduction" placeholder="公司/部门简介"></Input>
              </FormItem>
            </Form>
          </div>
          <v-title title="组织成员">
            <Button type="primary" @click="addDeptUser">成员变动</Button>
          </v-title>
          <div class="dept-user">
            <Table class="table-content" :height="tableHeight" border :columns="columns" :data="tableData"
                   ></Table>
            <div class="foot-page">
              <Page :total="page.total"
                    :current="page.current"
                    :page-size="page.size"
                    @on-change="pageChange"
                    @on-page-size-change="sizeChange"
                    show-sizer
                    show-total/>
            </div>
          </div>
        </div>
      </div>
    </Split>
    <Modal
      v-model="modal.show"
      :title="modal.title"
      :width="modal.width"
      @on-cancel="closeModal"
      scrollable
      class="modal-area"
      footer-hide
    >
      <check-dept v-if="modal.type==='dept'" :isSingle="true" :currentId="deptInfo.id" @close-modal="closeModal"
                  @sure-back="checkedDept"></check-dept>
      <check-user v-if="modal.type==='user'" :isSingle="false" :deptId="deptInfo.id" @close-modal="closeModal"
                  @sure-back="checkedUsers"></check-user>
    </Modal>
  </div>
</template>

<script>
import vTitle from "_c/basic/v-title"
import checkDept from "_c/sys-components/check-dept"
import checkUser from "_c/sys-components/check-user"
import * as API from "@/api/sys-dept"
import CheckUser from "_c/sys-components/check-user";
import {getUserList, saveDeptUsers} from "@/api/sys-user";
import {getTableData} from "@/mock/data";

export default {
  name: "sys-dept",
  components:{CheckUser, vTitle,checkDept,checkUser},
  data(){
    return{
      splitValue:0.3,
      deptInfo:{
        id:"",
        name:"",
        superior:"",
        superiorName:"",
        sortNum:1,
        introduction:"",
      },
      modal: {
        show: false,
        title: "",
        type: "",
        width: 300,
      },
      deptInfoRule: {},
      treeData: [],
      choiseType: "",
      page:{
        total:0,
        current:1,
        size:10
      },
      tableData:[],
      columns:[{
        title: '姓名',
        key: 'name'
      },
        {
          title: '性别',
          render: (h, params) => {
            return h('span',params.row.gender==="1"?"男":"女" );
          }
        },
        {
          title: '手机号',
          key: 'phoneNum'
        }]
    }
  },
  methods: {

    //点击树节点
    currentClick(arr,obj){
      let params = Object.assign({},obj)
      params.sortNum = parseInt(params.sortNum)
      this.deptInfo = params
      this.getTableData()
    },

    //添加部门
    addDept(){
      this.$refs.deptName.focus()
      let newObj = Object.assign({},this.deptInfo)
      this.deptInfo = {}
      this.deptInfo.superior=newObj.id
      this.deptInfo.superiorName=newObj.name
      this.deptInfo.sortNum=newObj.children?newObj.children.length+1:1
    },
    //保存部门
    saveDept(){
      API.saveDeptInfo(this.deptInfo).then(res=>{
        if (res.code==='0'){
          this.$Message.success("保存成功！")
          this.getTreeData()
        }
      }).catch(err=>{
        this.$Message.error(err)
      })
    },

    choiseSuperior(){
      this.modal.show = true
      this.modal.width = 400
      this.modal.type = "dept"
      this.modal.title = "选择组织"
    },

    //选择部门
    checkedDept(arr){
      this.deptInfo.superior = arr[0].id
      this.deptInfo.superiorName = arr[0].name
      this.closeModal()
    },

    //确认选择用户
    checkedUsers(arr){
       [...arr].forEach(v=>v.deptId = this.deptInfo.id)
      saveDeptUsers({
        userList:arr,
        deptId:this.deptInfo.id
      }).then(res=>{
        if (res.code==='0'){
          this.getTableData()
          this.closeModal()
        }
      })
    },

    //关闭弹窗
    closeModal() {
      let cleanModal = {
        show: false,
        title: "",
        type: "",
        width: 300
      }
      this.modal = Object.assign({}, cleanModal)
    },


    //删除部门
    deleteDept(){
      if (this.deptInfo.id){
        this.$Modal.confirm({
          title: '请求确认',
          content: '<p>是否确认删除该组织部门？</p>',
          onOk: () => {
            API.deleteDept({id:this.deptInfo.id}).then(res=>{
              if (res.code ==='0'){
                this.deptInfo = {}
                this.$Message.success("删除成功！")
                this.getTreeData()
              }
            })
          },
          onCancel: () => {
          }
        });
      }else {
        this.$Message.warning("请先选择组织部门")
      }

    },
    //添加成员
    addDeptUser(){
      if (this.deptInfo.id){
        this.modal.show = true
        this.modal.width = 500
        this.modal.type = "user"
        this.modal.title = "选择成员"
      }else{
        this.$Message.warning("请先选择组织部门")
      }

    },

    //获取组织架构树
    getTreeData(){
      API.getDeptTree().then(res=>{
        if (res.code ==='0'){
          this.treeData = res.data
        }
      })
    },
    //获取组织成员
    getTableData(){
      getUserList({
        deptId:this.deptInfo.id,
        isOnly:true,
        page:this.page
      }).then(res=>{
        if (res.code ==='0'){
          this.tableData = res.data.records
          this.page.total = parseInt(res.data.total)
        }
      }).catch(err=>{
        this.tableData = []
        this.$Message.error(err)
      })
    },
    pageChange(page){
      this.page.current = page
      this.getTableData()
    },
    sizeChange(size){
      this.page.current = 1
      this.page.size = size
      this.getTableData()
    },
  },
  computed:{
    tableHeight(){
     return  window.innerHeight -575 ;
    }
  },
  created() {
    this.getTreeData()
  },
}
</script>

<style lang="less" scoped>
.sys-dept{
  height: 100%;
  .split-area{
    .left-split-pane{
      /deep/.ivu-tree ul{
        font-size: 16px !important;
      }
      .left-content{
        padding-right: 15px;
      }
    }
    .right-split-pane{
      .right-content{
        padding-left: 15px;
        padding-right: 15px;
        .dept-detail{
          padding-top: 20px;
          height: 33vh;
        }
        .dept-user{
          padding: 10px;
          .foot-page{
            padding-top: 5px;
            width: 100%;
            height: 40px;
            text-align: center;
          }
        }
      }
    }
  }
  .table-content {
    text-align: center;
  }
}
</style>
